import React from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, Flex } from 'antd';
import useCount from '../../hooks/useCount';
import request from '../../utils/request';
import { useDispatch } from 'react-redux'
import { setUser } from '../../reducers/userInFoSlice';
const Login = () => {
    // 验证码
    const [form] = Form.useForm()
    const { count, run, countDown } = useCount(5)

    const yzm = () => {
        countDown()
        // setTimeout(() => {

        // }, 3000)
        form.setFieldsValue({
            code: Math.random().toString(32).slice(2, 6)
        })
    }
    const dis = useDispatch()
    const onFinish = async (values) => {
        console.log('Received values of form: ', values);
        let res = await request.post('/login', values)
        console.log(res);
        const { code, token } = res.data
        if (code === 1) {
            localStorage.setItem('token', token)
            localStorage.setItem('username', values.username)
            let res = await request.get('/getUserInfo', values)
            console.log(res);
            const { code, data } = res.data
            if (code === 1) {
                dis(setUser({ name: data.name, pic: data.pic }))
                alert('登陆成功')
                window.location.href = '/index/home'
            }
        }
    };
    return (

        <div style={{ width: '100%', height: '100%' }}>
            <div style={{ height: '300px' }}></div>
            <div style={{ marginLeft: '800px' }}>
                <Form
                    form={form}
                    name="login"
                    initialValues={{ remember: true }}
                    style={{ maxWidth: 360 }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: '请输入用户名' }]}
                    >
                        <Input prefix={<UserOutlined />} placeholder="请输入用户名" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: '请输入密码' }]}
                    >
                        <Input.Password prefix={<LockOutlined />} type="password" placeholder="请输入密码" />
                    </Form.Item>
                    <div style={{ display: 'flex' }}>
                        <Form.Item
                            name="code"
                            rules={[{ required: true, message: '请输入验证码' }]}
                        >
                            <Input placeholder="请输入验证码" />
                        </Form.Item>
                        <Button
                            disabled={run}
                            onClick={() => { yzm() }}
                        >{run ? count + '秒后获取验证码' : '获取验证码'}</Button>
                    </div>

                    <Form.Item>
                        <Flex justify="space-between" align="center">
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>记住密码</Checkbox>
                            </Form.Item>
                        </Flex>
                    </Form.Item>

                    <Form.Item>
                        <Button block type="primary" htmlType="submit">
                            登陆
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
};
export default Login;